<script setup>
import { ref,reactive,onMounted } from 'vue';
import axios from "@/utils/axios.js";
const data=reactive({
  list:null,
  total:0,
  page:1,
  limit:5,
})
const init=()=>{
  axios.get('/api/emp/page',{
    params:{
      page:data.page,
      limit:data.limit
    }
  }).then(res=>{
    console.log("员工展示",res)
    data.list=res.data.records
    data.total=res.data.total
  })
}
onMounted(()=>{
  init()
})
//分页
const jump = (val) => {
  data.page = val
  init();
}
</script>

<template>
  <div class="employ">
    <h1>员工展示</h1>
    <div class="btu">
      <el-button type="danger" size="mini" @click="delSelected" icon="Delete">删除选中</el-button>
      <el-button type="primary" size="mini" @click="data.showAdd = !data.showAdd" icon="Plus">添加员工</el-button>
    </div>
    <el-table :data="data.list" style="width: 100%">
      <el-table-column type="selection" width="55" label="选择"></el-table-column>
      <el-table-column label="序号" type="index" align="center" width="100"/>
      <el-table-column prop="empno" label="ID" align="center"></el-table-column>
      <el-table-column prop="ename" label="姓名" align="center"></el-table-column>
      <el-table-column prop="job" label="职务" align="center"></el-table-column>
      <el-table-column prop="sal" label="工资" align="center"></el-table-column>
      <el-table-column prop="deptno" label="部门" align="center"></el-table-column>
      <el-table-column prop="hiredate" label="入职时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button color="green" size="mini" circle icon="edit" @click="edit(scope.row)"></el-button>
          <el-button type="danger" size="mini" circle icon="delete" @click="del(scope.row.empno)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background style="margin-top: 10px"
        layout="total, prev, pager, next, jumper"
        :total="data.total"
        :page-size="data.limit"
        :current-page="data.page"
        @current-change="jump"
    />
  </div>
</template>

<style scoped>
.employ {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>